<!DOCTYPE html>
<html><head>
<style type="text/css">
	div {
		background: lightblue;
		padding: 10px;
		display: inline-block;
		min-width: 50px;
		vertical-align: top;
		color: Red;
	}
</style>
</head><body>

<img src="barretr_Earth.png" width="100" height="100" />

<script type="text/javascript">

function createHTMLWithFilter(node, w, h, filter) {
	var svgns = "http://www.w3.org/2000/svg";
	var svg = document.createElementNS(svgns, 'svg');
	svg.setAttribute('height', h);
	svg.setAttribute('width', w);
	svg.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
	
	var defs = document.createElementNS(svgns, 'defs');
	svg.appendChild(defs);
	
	var grayscaleF = document.createElementNS(svgns, 'filter');
	grayscaleF.setAttribute('id', 'grayscale');
	defs.appendChild(grayscaleF);
	
	var grayscale = document.createElementNS(svgns, 'feColorMatrix');
	//grayscale.setAttribute('type', 'matrix');
	//grayscale.setAttribute('values', '0.3333 0.3333 0.3333 0 0     0.3333  0.3333  0.3333 0 0     0.3333  0.3333  0.3333 0 0     0 0 0 1 0');
	grayscale.setAttribute('type', 'saturate');
	grayscale.setAttribute('values', '0');
	grayscaleF.appendChild(grayscale);
	
	var blurF = document.createElementNS(svgns, 'filter');
	blurF.setAttribute('id', 'blur');
	defs.appendChild(blurF);
	
	var blur = document.createElementNS(svgns, 'feGaussianBlur');
	blur.setAttribute('stdDeviation', '1');
	blurF.appendChild(blur);
	
	var bothF = document.createElementNS(svgns, 'filter');
	bothF.setAttribute('id', 'grayscaleBlur');
	defs.appendChild(bothF);
	
	var grayscale = document.createElementNS(svgns, 'feColorMatrix');
	grayscale.setAttribute('type', 'saturate');
	grayscale.setAttribute('values', '0');
	bothF.appendChild(grayscale);
	
	var blur = document.createElementNS(svgns, 'feGaussianBlur');
	blur.setAttribute('stdDeviation', '1');
	bothF.appendChild(blur);
	
	var htmlNode = document.createElementNS(svgns, 'foreignObject');
	htmlNode.setAttribute('width', w);
	htmlNode.setAttribute('height', h);
	htmlNode.setAttribute('filter', 'url(#' + filter + ')');
	htmlNode.appendChild(node);
	svg.appendChild(htmlNode);
	
	document.body.appendChild(svg);
}

var node = document.createElement('img');
node.setAttribute('src', 'barretr_Earth.png');
node.setAttribute('width', '100');
node.setAttribute('height', '100');
createHTMLWithFilter(node, 100, 100, 'grayscale');
document.body.appendChild(document.createElement('br'));
var node = document.createElement('img');
node.setAttribute('src', 'barretr_Earth.png');
node.setAttribute('width', '100');
node.setAttribute('height', '100');
createHTMLWithFilter(node, 100, 100, 'blur');
var node = document.createElement('img');
node.setAttribute('src', 'barretr_Earth.png');
node.setAttribute('width', '100');
node.setAttribute('height', '100');
createHTMLWithFilter(node, 100, 100, 'grayscaleBlur');

</script>

<br />
<div>normal</div>
<script type="text/javascript">

var node = document.createElement('div');
node.innerHTML = 'bw';
createHTMLWithFilter(node, 50, 40, 'grayscale');
document.body.appendChild(document.createElement('br'));
var node = document.createElement('div');
node.innerHTML = 'blur';
createHTMLWithFilter(node, 50, 40, 'blur');
var node = document.createElement('div');
node.innerHTML = 'grayscaleBlur';
createHTMLWithFilter(node, 150, 40, 'grayscaleBlur');
node = null;
</script>

</body></html>
